<template>
  <div ref="radarChart" style="width: 1400px; height: 600px"></div>
</template>

<script>
  import * as echarts from "echarts";

  export default {
    data() {
      return {
        list: [
          { name: "剥落", num: 0 },
          { name: "风化", num: 0 },
          { name: "沉降", num: 0 },
          { name: "位移", num: 0 },
          { name: "裂缝", num: 13 },
          { name: "坍塌", num: 0 },
          { name: "倾斜", num: 0 },
          { name: "渗水", num: 0 },
          { name: "鼓胀", num: 6 },
          { name: "应力", num: 0 },
          { name: "松动", num: 1 },
        ],
        option: null,
      };
    },
    mounted() {
      this.renderChart();
      this.fetchChartData();
    },
    methods: {
      async fetchChartData() {
        try {
          const response = await this.$axios.get("/api/screen/letterSource");
          console.log(response.data.data);
          if (response.data.data) {
            this.list = response.data.data.all_chartData;
            this.renderChart();
          } else {
            console.error("API request failed:", response.data.msg);
          }
        } catch (error) {
          console.error("Error fetching chart data:", error);
        }
      },
      renderChart() {
        let lineColor = "rgba(236, 105, 165, 1)";
        let areaColor = "rgba(236, 105, 165, 1)";
        let max = Math.max(...this.list.map((item) => item.num));
        let seriesData = [
          {
            value: [],
            name: "",
            symbol: "none",
            lineStyle: {
              normal: {
                color: lineColor,
                width: 2,
              },
            },
            areaStyle: {
              normal: {
                color: areaColor,
              },
            },
          },
        ];

        this.list.forEach((item, index) => {
          seriesData[0].value[index] = item.num;
          seriesData.push({
            value: [max],
            symbol: "circle",
            symbolSize: 4,
            lineStyle: {
              normal: {
                color: "transparent",
              },
            },
            itemStyle: {
              normal: {
                color: "rgb(255,230,103)",
              },
            },
          });
        });

        let indicatorList = this.list.map((item) => ({
          name: item.name,
          max: max,
          num: item.num,
        }));

        this.option = {
          radar: {
            center: ["50%", "45%"],
            radius: ["0", "70%"],
            shape: "circle",
            name: {
              formatter: (value, indicator) => {
                let text =
                  indicator.num > 0
                    ? `{light|${indicator.name}}\n{b|${indicator.num}}`
                    : `{dark|${indicator.name}}\n{b|${indicator.num}}`;
                return text;
              },
              rich: {
                a: { fontSize: 16 },
                b: {
                  marginTop: "4px",
                  fontSize: 18,
                  color: "rgb(215, 234, 245)",
                  fontFamily: "fashionSimplifiedFont",
                },
                light: { fontSize: 16, color: "rgb(185, 11, 133)" },
                dark: { fontSize: 16, color: "rgb(69, 112, 141)" },
              },
            },
            axisLabel: {
              show: false,
              fontSize: 18,
              color: "rgb(185, 191, 133)",
            },
            splitArea: { areaStyle: { color: "transparent" } },
            axisLine: { show: true, lineStyle: { color: "rgb(90, 53, 77)" } },
            splitLine: { show: true, lineStyle: { color: "rgb(90, 53, 77)" } },
            indicator: indicatorList,
          },
          series: [{ type: "radar", data: seriesData }],
        };

        const chart = echarts.init(this.$refs.radarChart);
        chart.setOption(this.option);
      },
    },
  };
</script>

<style scoped></style>
